<template>
  <Modal v-model="relFlag" :title="title" width="800px" :footer-hide="true">
    <div class="rel">
      <div class="relLeft">
        <iframe
          :src="iframeUrl"
          v-if="relFlag"
          style="width: 100%; height: 100%"
          frameborder="0"
          id="myIframe"
          ref="myIframe"></iframe>
      </div>
      <div class="relRight">
        <div class="er">
          <img v-if="erImgUrl" :src="`data:;base64,${erImgUrl}`" />
          <Button type="primary" @click="downEr">下载二维码</Button>
        </div>
      </div>
    </div>

    <div class="footerRelBtn0" v-if="btnFlag != 'flag'">
      <Button @click="hide">关闭</Button>
      <Button type="info" @click="onOk" v-if="statusVal != 'PUBLISHED'">发布</Button>
    </div>
  </Modal>
</template>

<script>
  import dt from '@dt/dt'
  import activityMgr from '@/biz/activity/activity'
  export default {
    data() {
      return {
        title: '预览/发布',
        iframeUrl: '',
        acId: '',
        iframeWin: null,
        statusVal: '',
        okText: '',
        relFlag: false,
        btnFlag: '',
        erImgUrl: '',
        times: '',
        name: '',
        promoteSn: null
      }
    },
    methods: {
      downEr() {
        this.downLoadImg(`data:;base64,${this.erImgUrl}`)
      },
      /**
       * 下载图片
       */
      downLoadImg(url) {
        let name = this.name ? this.name : this.$parent.acBasicsReq.name
        var link = document.createElement('a')
        if (name.indexOf('.') < 0) {
          name += '.png'
          const xhr = new XMLHttpRequest()
          xhr.open('GET', url, true)
          xhr.responseType = 'blob'
          xhr.onload = () => {
            if (xhr.status === 200) {
              link.href = window.URL.createObjectURL(xhr.response)
              link.download = name
              link.click()
              this.$nextTick(() => {
                this.$Message.destroy()
                this.$Message.info('下载完成')
              })
            } else {
              this.$Message.destroy()
              this.$Message.error('下载失败')
            }
          }
          xhr.send()
          this.$Message.loading('下载中')
        } else {
          link.href = `${url}?response-content-type=application/octet-stream`
          link.download = ''
          link.click()
        }
      },

      show(val) {
        this.relFlag = true
        this.acId = val.acId
        this.statusVal = val.status
        this.times = val.times
        this.name = val.name ? val.name : ''
        this.promoteSn = val.promoteSn
        this.iframeUrl = `${this.$dt.env.h5Url}/market/#/pages_com/lottery/detail?acId=${this.acId}&times=${this.times}`
        this.btnFlag = val.btnFlag
        this.erMa()
      },
      hide() {
        this.relFlag = false
      },
      erMa(sn) {
        let params = {
          envVersion: dt.env.env == 'prod' ? 'release' : 'trial',
          scene: `sn=${this.promoteSn}`,
          upload: true,
          url: 'pages_com/lottery/index'
        }
        activityMgr.getAcQrCode(params).then((res) => {
          this.erImgUrl = res
        })
      },

      onOk() {
        let _this = this

        this.$Modal.confirm({
          title: '发布',
          content: '确认发布该活动？',
          closable: true,
          onOk: () => {
            _this.$parent.imgFlag = false
            let params = {
              acId: this.acId
            }
            activityMgr.publishBasics(params).then((res) => {
              this.$Message.success('发布成功')
              this.$emit('publishUpdata')
              this.relFlag = false
            })
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .rel {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .relLeft {
      width: 375px;
      height: 660px;
    }
    .relRight {
      flex: 1;
      .er {
        text-align: center;

        img {
          display: block;
          width: 250px;
          height: 250px;
          margin: 40px auto;
        }
      }
    }
  }
  .footerRelBtn0 {
    text-align: center;
    margin-top: 20px;
    border-top: 1px #eee solid;
    padding-top: 20px;

    button {
      width: 80px;
      margin: 0 10px;
    }
  }
</style>
